<template>
    <div>
            <el-row class="flexBox" >
              <el-col :span="24">
                <el-row class="flexBox" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:10px">
                  <el-col :span="14">
                    <div class="filelist-title">
                      <p
                        class="infolist"
                        v-for="(item, index) in infolist"
                        :key="index"
                      >
                        <span v-if="item[0]==null">在职</span>
                        <span v-if="item[0]==1">辞职</span>
                        <span v-if="item[0]==2">离职</span>
                        <span v-if="item[0]==3">辞退</span>
                        <span v-if="item[0]==4">开除</span>
                        <span v-if="item[0]==5">退休</span>
                        <span v-if="item[0]==6">调休</span>
                        <span v-if="item[0]==7">死亡</span>
                        <span v-if="item[0]==8">下落不明</span>
                        <br />
                        <span
                          style="
                            font-weight: bold;
                            font-size: 20px;
                            line-height: 30px;
                          "
                          >{{ item[1] }}</span
                        >人
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="10" style="float: right">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        float: right;
                        padding: 20px;
                      "
                    >
                      <el-select
                        v-model="formInline.ryxz"
                        size="small"
                        placeholder="人员性质"
                        style="margin-right: 10px; width: 100px"
                      >
                        <el-option v-for="item in ryxzList" :key="item.name" :value="item.name"></el-option>
                      </el-select>
<!--                      <el-select-->
<!--                        size="small"-->
<!--                        v-model="formInline.dept"-->
<!--                        placeholder="科室"-->
<!--                        style="margin-right: 10px"-->
<!--                      >-->
<!--                        <el-option v-for="item in deptList" :key="item.name"  :value="item.name"></el-option>-->
<!--                      </el-select>-->
                      <el-button type="primary" @click="onSubmit" size="small"
                        >查询</el-button
                      >
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <!-- <el-col :span="6">
              <el-calendar v-model="value">
              </el-calendar>
            </el-col> -->
            </el-row>
            <!-- <div id="main" style="width:500px;height:500px;"></div> -->
            <el-row :gutter="15" v-loading.fullscreen.lock="showAll" element-loading-text="拼命加载中...">
              <el-col
                :md="24"
                :lg="12"
                :xl="8"
                v-for="(item, index) in Echarts"
                :key="index"
              >
                <el-card :id="`card${index}`" shadow="hover" style="margin-bottom:15px; margin-top:15px; padding:20px">
                  <div :id="index" style="width: 460px; height: 420px; margin:0 auto;"></div>
                </el-card>
              </el-col>
            </el-row>
    </div>
</template>
<script>
import TaskManager from '../service/TaskManager'
export default {
  data() {
    return {
      showAll:true,
      infolist: [
        { name: "在职", value: "480" },
        { name: "退休", value: "12" },
        { name: "死亡", value: "5" },
        { name: "离职", value: "17" },
        { name: "辞退", value: "1" },
        { name: "调离", value: "3" },
        { name: "开除", value: "1" },
        { name: "辞职", value: "1" },
      ],
      formInline: {
        ryxz: "护士",
        dept: "",
      },
      Echarts: [
      {name: "护士层级分布统计"},
      {name: "护士职称分布统计"},
      {name: "护士职务分布统计"},
      {name: "学历分布统计"},
      {name: "年龄段分布统计"},
      {name: "院龄分布统计"},
      {name: "性别分布统计"},
      {name: "护士人员类别分布统计"},
      {name: "工龄分布统计"},
      {name: "人员性质统计"},
      ],
      chart_data:[],
      deptList:[
        {name:"护理部",value:0},
        {name:"信息科",value:1},
        {name:"院长办公室",value:2},
        {name:"供应室",value:3},
        {name:"住院骨一科",value:4},
        {name:"老年疾病科",value:5},
        {name:"大外科",value:6},
        {name:"体检中心",value:7},
      ],
      ryxzList:[
        {name:"护士",value:0},
        {name:"医生",value:1},
        {name:"行政",value:2},
        {name:"后勤",value:4},
        {name:"管理",value:5},
        {name:"药剂",value:6},
        {name:"按摩",value:7},
      ]
    }
  },
  methods:{
    chartInit(id,title,chart_data,tool) {
      let div_1 = this.$echarts.init(document.getElementById(id));
      div_1.setOption({
          title: {
              text: title,
              left: 'center'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              orient: 'vertical',
              left: 'right',
              data:tool
          },
          series: [
              {
                  name: title,
                  type: 'pie',
                  radius: '55%',
                  center: ['40%', '60%'],
                   label: {
                    normal: {
                       position: 'outer',
                       show : true
                    }
                  },
                  data:chart_data,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)',
                      }
                  }
              }
          ]
      });
    },
    getData(ryxz){
      let data={
        name:'state',
        ryxz:''
      }
      if(ryxz){
        data.ryxz=ryxz;
      }
      TaskManager.getChart(data)
        .then((res)=>{
          this.infolist=res.data;
        })
    },
    dataInit(name){
      let data={
        name:name,
        ryxz:''
      }
      if(name!="人员性质"){
        data.ryxz=this.formInline.ryxz
      }
      TaskManager.getChart(data)
      .then((res)=>{
        if(name=='人员层级')
        {
            let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].人员层级!=""){
                item.name=res.data[key].人员层级;
                item.value=res.data[key].counts;
                tool.push(res.data[key].人员层级);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            this.chartInit("0","护士人员层级分布统计",data,tool)
        }
        else if(name=='聘任职称')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].聘任职称!=""){
                item.name=res.data[key].聘任职称;
                item.value=res.data[key].counts;
                tool.push(res.data[key].聘任职称);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("1",`${this.formInline.ryxz}人员职称分布统计`,data,tool)
        }
         else if(name=='管理职务')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].管理职务!=""){
                item.name=res.data[key].管理职务;
                item.value=res.data[key].counts;
                tool.push(res.data[key].管理职务);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("2",`${this.formInline.ryxz}人员职务分布统计`,data,tool)
        }
        else if(name=='学历')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].学历!=""){
                item.name=res.data[key].学历;
                item.value=res.data[key].counts;
                tool.push(res.data[key].学历);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("3","学历分布统计",data,tool)
        }
            else if(name=='性别')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].性别!=""){
                item.name=res.data[key].性别;
                item.value=res.data[key].counts;
                tool.push(res.data[key].性别);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("9","性别分布统计",data,tool)

        }
            else if(name=='人员类别')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].人员类别!=""){
                item.name=res.data[key].人员类别;
                item.value=res.data[key].counts;
                tool.push(res.data[key].人员类别);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("5","人员类别分布统计",data,tool)
        }
            else if(name=='ryxz')
        {
           let data=[];
            let tool=[];
            for(let key in res.data){
              let item={};
              if(res.data[key].ryxz!=""){
                item.name=res.data[key].ryxz;
                item.value=res.data[key].counts;
                tool.push(res.data[key].ryxz);
              }
              else{
                item.name="其它";
                item.value=res.data[key].counts;
                tool.push("其它");
              }
              data.push(item);
            }
            // this.chart_data=data;
            this.chartInit("4","人员性质分布统计",data,tool)
            this.showAll=false
        }
            else if(name=='工龄')
        {
           let data=[
             {name:"<1",value:0},
             {name:"1-2",value:0},
             {name:"2-5",value:0},
             {name:"5-10",value:0},
             {name:"10-20",value:0},
             {name:">20",value:0},
             {name:"其它",value:0}
           ];
            let tool=["<1","1-2","2-5","5-10","10-20",">20","其它"];
            for(let key in res.data){
              if(res.data[key].工龄!=""||res.data[key].工龄!="null"){
                if(res.data[key].工龄.split('年')[0]<1){
                    data[0].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].工龄.split('年')[0]<2){
                    data[1].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].工龄.split('年')[0]<5){
                    data[2].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].工龄.split('年')[0]<10){
                    data[3].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].工龄.split('年')[0]<20){
                    data[4].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].工龄.split('年')[0]>=20){
                    data[5].value+=Number(res.data[key].counts);
                }
              }
              else{
                   data[6].value+=Number(res.data[key].counts);
              }
            }
            this.chartInit("7","工龄分布统计",data,tool)
        }
            else if(name=='院龄')
        {
            let data=[
             {name:"<1",value:0},
             {name:"1-2",value:0},
             {name:"2-5",value:0},
             {name:"5-10",value:0},
             {name:"10-20",value:0},
             {name:">20",value:0},
             {name:"其它",value:0}
           ];
            let tool=["<1","1-2","2-5","5-10","10-20",">20","其它"];
            for(let key in res.data){
              if(res.data[key].院龄!=""){
                if(res.data[key].院龄.split('年')[0]<1){
                    data[0].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].院龄.split('年')[0]<2){
                    data[1].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].院龄.split('年')[0]<5){
                    data[2].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].院龄.split('年')[0]<10){
                    data[3].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].院龄.split('年')[0]<20){
                    data[4].value+=Number(res.data[key].counts);
                }
                else if(res.data[key].院龄.split('年')[0]>=20){
                    data[5].value+=Number(res.data[key].counts);
                }
              }
              else{
                   data[6].value+=Number(res.data[key].counts);
              }
            }
            // this.chart_data=data;
            this.chartInit("8","院龄分布统计",data,tool)
        }
            else if(name=='出生日期')
        {
            let data=[
             {name:"<30",value:0},
             {name:"30-40",value:0},
             {name:"40-50",value:0},
             {name:"50-60",value:0},
             {name:"60-70",value:0},
             {name:">70",value:0},
             {name:"其它",value:0}
           ];
            let tool=["<30","30-40","40-50","50-60","60-70",">70","其它"];
            let now=new Date().getFullYear();
            // console.log(now);
            for(let key in res.data){
              if(res.data[key].出生日期!=""){
                if(now-res.data[key].出生日期.split('-')[0]<30){
                    data[0].value+=Number(res.data[key].counts);
                }
                else if(now-res.data[key].出生日期.split('-')[0]<40){
                    data[1].value+=Number(res.data[key].counts);
                }
                else if(now-res.data[key].出生日期.split('-')[0]<50){
                    data[2].value+=Number(res.data[key].counts);
                }
                else if(now-res.data[key].出生日期.split('-')[0]<60){
                    data[3].value+=Number(res.data[key].counts);
                }
                else if(now-res.data[key].出生日期.split('-')[0]<70){
                    data[4].value+=Number(res.data[key].counts);
                }
                else if(now-res.data[key].出生日期.split('-')[0]>=70){
                    data[5].value+=Number(res.data[key].counts);
                }
              }
              else{
                   data[6].value+=Number(res.data[key].counts);
              }
            }
            // this.chart_data=data;
            this.chartInit("6","年龄分布统计",data,tool)
        }
      })
    },
    getAllData(){
        if(this.formInline.ryxz=='护士'){
          let div=document.getElementById('card0');
          div.style.display="block"
          this.dataInit("人员层级")
        }else{
          let div=document.getElementById('card0');
          div.style.display="none"
        }
        this.dataInit("聘任职称")
        this.dataInit("管理职务")
        this.dataInit("学历")
        this.dataInit("性别")
        this.dataInit("人员类别")
        this.dataInit("ryxz")
        this.dataInit("出生日期")
        this.dataInit("工龄")
        this.dataInit("院龄")
    },
    onSubmit(){
      this.getAllData();
      this.getData(this.formInline.ryxz)
    }
  },
  created(){

  },
  mounted(){
      this.$nextTick(()=>{
      // for...of获取键值对，在迭代对象后加entries()
        this.getAllData();
        this.getData();
      })
  }
}
</script>
<style scoped>
i {
  color: white !important;
}
.flexBox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.home {
  width: 100%;
  height: 100%;
}
.el-header,
.el-footer {
  position: relative;
  z-index: 2;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 60px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
}
.el-aside {
  background-color: rgb(64, 158, 254);
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.el-main {
  position: relative;
  z-index: 1;
  background-color: #fff;
  color: #000;
  text-align: center;
  line-height: 20px;
}

body > .el-container {
  margin-bottom: 40px;
}
/deep/ .el-submenu__title:hover {
  background-color: rgb(133, 189, 248) !important;
}
/deep/ .el-menu-item:hover {
  background-color: rgb(130, 191, 255) !important;
}
.user {
  float: right;
}
.infolist {
  color: #80848f;
  font-size: 14px;
  display: inline-block;
  margin-right: 40px;
}
.filelist-title {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-left: 100px;
}
</style>
